<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>银行系统 - 个人信息</title>
<style>
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

h2 {
    color: #333;
}

form {
    max-width: 400px;
    margin-top: 20px;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="text"],
input[type="tel"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

button {
    padding: 10px 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}
</style>
</head>
<body>
    <h2>个人信息</h2>
    
    <!-- 添加用户对象存在性检查 -->
    <c:if test="${empty user}">
        <p>用户信息未加载，请重新登录</p>
        <a href="login.jsp">登录</a>
    </c:if>
    
    <c:if test="${not empty user}">
        <form id="userInfoForm">
            <div class="form-group">
                <label for="username">用户名：</label>
                <input type="text" id="username" name="username" value="${user.username}" disabled>
            </div>
            
            <div class="form-group">
                <label for="realName">真实姓名：</label>
                <input type="text" id="realName" name="realName" value="${user.real_name}"> <!-- 修正为real_name -->
            </div>
            
            <div class="form-group">
                <label for="idCard">身份证号：</label>
                <input type="text" id="idCard" name="idCard" value="${user.id_card}"> <!-- 修正为id_card -->
            </div>
            
            <div class="form-group">
                <label for="phone">手机号码：</label>
                <input type="tel" id="phone" name="phone" value="${user.phone}">
            </div>
            
            <button type="button" onclick="updateUserInfo()">保存修改</button>
        </form>
    </c:if>
    
    
    <script>
    function updateUserInfo() {
        var realName = document.getElementById("realName").value;
        var idCard = document.getElementById("idCard").value;
        var phone = document.getElementById("phone").value;
        
        // 使用AJAX提交表单
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "updateUserInfo", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                alert(xhr.responseText);
            }
        };
        xhr.send("realName=" + realName + "&idCard=" + idCard + "&phone=" + phone);
    }
    </script>
</body>
</html>